﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Calendar, Month Calendar, MonthCalendar, DateTimeInput, DateTimePicker, Date Picker" /> 
    <meta name="description" content="jqxDateTimeInput has built-in date parsing functionality that allows you to
     display date feedback in a variety of ways. Choose a date format from the dropdown to apply it to the jqxDateTimeInput."/>
    <title id='Description'>jqxDateTimeInput has built-in date parsing functionality that allows you to
     display date feedback in a variety of ways. Choose a date format from the dropdown to apply it to the jqxDateTimeInput. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {               
                // define available cultures
                var availableFormats = ['short date pattern', 'long date pattern', 'short time pattern', 'long time pattern',
                'long date, short time pattern', 'long date, long time pattern', 'month/day pattern', 'month/year pattern', 'custom'];

                // create a jqxDateTimeInput.
                $("#jqxDateTimeInput").jqxDateTimeInput({ width: '300px', height: '25px', formatString: 'd'});
                // create a ComboBox
                $("#jqxDropDownList").jqxDropDownList({ source: availableFormats, selectedIndex: 0, width: '230px', height: '25px'});
                // set the culture.
                $("#jqxDropDownList").on('select', function (event) {
                    var index = event.args.index;
                    switch (index) {
                        case 0:
                            $("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'd' });
                            break;
                        case 1:
                            $("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'D' });
                            break;
                        case 2:
                            $("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 't' });
                            break;
                        case 3:
                            $("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'T' });
                            break;
                        case 4:
                            $("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'f' });
                            break;
                        case 5:
                            $("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'F' });
                            break;
                        case 6:
                            $("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'M' });
                            break;
                        case 7:
                            $("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'Y' });
                            break;
                        case 8:
                            $("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'dddd-MMMM-yyyy' });
                            break;
                    }
                });
            });
        </script>
        <div id='jqxWidget' style='width: 300px;'>
            <div id='jqxDateTimeInput'>
            </div>
            <br />
            <div>
                <div style='font-family: "Verdana", "sans-serif"; font-size: 13px;'>
                    Choose Format:</div>
                    <br />
                <div id='jqxDropDownList'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
